<template>
  <!--巡检点查看 -->
  <div class="point-view box-shadow">
    <div class="search-area">
      <div class="form">
        <el-form
          :model="listQuery"
          ref="listQuery"
          size="small"
          :inline="true"
          label-width="115px"
        >
          <el-form-item :label="$t('巡检点名称') + '：'" label-width="142px">
            <el-input
              v-model="listQuery.viewPointName"
              :size="searchInputSize"
              :placeholder="$t('请输入巡检点')"
              @keyup.enter.native="getPointsList"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('巡检对象名称') + '：'" label-width="164px">
            <el-input
              v-model="listQuery.deviceName"
              :size="searchInputSize"
              :placeholder="$t('请输入')"
              @keyup.enter.native="getPointsList"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('识别类型') + '：'"
            prop="realValue"
            label-width="149px"
          >
            <el-select
              v-model="listQuery.identifyType"
              :placeholder="$t('请选择')"
              :size="searchInputSize"
              clearable
            >
              <el-option
                v-for="dict in dict.type.recognition"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('巡检对象类型') + '：'"
            prop="pointName"
            label-width="149px"
          >
            <el-checkbox-group v-model="listQuery.deviceTypes">
              <el-checkbox label="0" name="type">{{ $t("实体") }}</el-checkbox>
              <el-checkbox label="1" name="type">{{ $t("虚拟") }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
      <div class="search-area-btn btns">
        <div
          @click="searchBtn"
          class="serch-btn cuver-point"
          v-hasPermi="['deploy:inspectpoint:search']"
        >
          {{ $t("搜索") }}
        </div>
        <div
          @click="resetBtn"
          class="reset-btn cuver-point"
          v-hasPermi="['deploy:inspectpoint:reset']"
        >
          {{ $t("重置") }}
        </div>
      </div>
    </div>
    <div class="line-two">
      <el-row>
        <el-col :span="6" class="point-list scroll-hidden">
          <div class="title">{{ $t("巡检点列表") }}</div>
          <div
            v-for="point in pointsList"
            :key="point.viewPointId"
            :class="[
              'lists cursor-pointer',
              viewPointId == point.viewPointId ? 'current-item' : '',
            ]"
            @click="pointItemClick(point)"
          >
            <div class="point"><span></span></div>
            <div>{{ point.viewPointName | handleCtx("22") }}</div>
          </div>
        </el-col>
        <el-col :span="12" class="camero-table">
          <div class="calibration-verification">
            <div class="title">
              <span class="left">{{ $t("标定信息") }}</span>
              <span class="right">
                {{ $t("点击左侧巡检点加载图片图片ID1636180082") }}</span
              >
            </div>
            <div class="tabs">
              <div
                :class="[
                  'camero cursor-pointer',
                  currentTab == '1' ? 'current-tab' : '',
                ]"
                @click="tabClick('1')"
              >
                {{ $t("可见光") }}
              </div>
              <div
                :class="[
                  'hot cursor-pointer',
                  currentTab == '2' ? 'current-tab' : '',
                ]"
                @click="tabClick('2')"
              >
                {{ $t("热成像") }}
              </div>
              <div class="img">
                <canvas ref="canvasImg" class="canvasImg">
                  {{ $t("浏览器版本过低请去下载最新版本浏览器") }}
                </canvas>
              </div>
            </div>
          </div>
          <div class="obj-list">
            <div class="title">{{ $t("对象列表") }}</div>
            <el-table :data="objTable" style="width: 100%" height="250">
              <el-table-column
                prop="deviceName"
                align="center"
                :label="$t('对象名称')"
              >
              </el-table-column>
              <el-table-column
                prop="identifyType"
                align="center"
                :label="$t('识别类型')"
              >
                <template slot-scope="scope">
                  <dict-tag
                    :options="dict.type.recognition"
                    :value="scope.row.identifyType"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="calibrationId"
                :label="$t('关联标定')"
                align="center"
              ></el-table-column>
              <el-table-column :label="$t('操作')" align="center">
                <template slot-scope="scope">
                  <el-button
                    @click="objViewBtn(scope.row)"
                    type="text"
                    size="small"
                    class="table-btn"
                    >{{ $t("查看") }}</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="6" class="view-obj">
          <div class="obj-view">
            <div class="title">{{ $t("对象查看") }}</div>
            <el-row
              class="obj-detail"
              style="margin-top: 0; display: flex; align-items: center"
            >
              <div>{{ $t("对象名称") + "：" }}</div>
              <div>{{ objView.deviceName || $t("无") }}</div>
            </el-row>
            <el-row
              class="obj-detail"
              style="display: flex; align-items: center"
            >
              <div>{{ $t("识别类型") }}：</div>
              <div>{{ objView.identifyTypeName || $t("无") }}</div>
            </el-row>
            <el-row
              class="obj-detail"
              style="display: flex; align-items: center"
            >
              <div>{{ $t("标定类型") + "：" }}</div>
              <div>
                <div>{{ objView.calibrationTypeName || "：" + $t("无") }}</div>
                <!-- <div><img :src="objView.calibrationType" alt="" /></div> -->
              </div>
            </el-row>
            <el-row
              class="obj-detail"
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <el-col :span="5" style="width: 90px">{{
                $t("数据类型") + "："
              }}</el-col>
              <el-col :span="19">
                <el-radio v-model="objView.dataType" label="0" disabled>{{
                  $t("数值")
                }}</el-radio>
                <el-radio v-model="objView.dataType" label="1" disabled>{{
                  $t("枚举")
                }}</el-radio>
              </el-col>
            </el-row>
            <el-row
              class="obj-detail"
              style="display: flex; align-items: center"
            >
              <div>{{ $t("仪表量程") }}：</div>
              <div>
                {{ objView.minRange || $t("无") }}&nbsp;&nbsp;-&nbsp;&nbsp;{{
                  objView.maxRange || $t("无")
                }}
              </div>
            </el-row>
            <el-row class="obj-detail">
              <el-col :span="3.5" style="padding-left: 28px">{{
                $t("单位") + "："
              }}</el-col>
              <el-col :span="10">{{ objView.unit || $t("无") }}</el-col>
            </el-row>
          </div>
          <!-- 操作区域 -->
          <div class="operation" v-if="showOption">
            <div class="title">{{ $t("参考值") }}</div>
            <el-form
              :model="virtualData"
              ref="virtualRef"
              :rules="virtualDataRules"
              label-width="95px"
            >
              <el-form-item :label="$t('是否启用') + ':'" prop="virtualState">
                <el-radio v-model="virtualData.virtualState" label="1">{{
                  $t("启用")
                }}</el-radio>
                <el-radio v-model="virtualData.virtualState" label="0">{{
                  $t("停用")
                }}</el-radio>
              </el-form-item>
              <!-- 枚举类型 -->
              <template
                v-if="
                  objView.dataType == '1' && virtualData.virtualState == '1'
                "
              >
                <el-form-item :label="$t('取值') + ':'" prop="virtualEmunValue">
                  <el-select v-model="virtualData.virtualEmunValue">
                    <el-option :label="$t('开')" value="1"></el-option>
                    <el-option :label="$t('关')" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </template>
              <!-- 数据类型 -->
              <template
                v-if="
                  objView.dataType == '0' && virtualData.virtualState == '1'
                "
              >
                <el-form-item label="类型：" prop="virtualType">
                  <el-radio-group v-model="objView.virtualType">
                    <el-radio :label="0">{{ $t("固定值") }}</el-radio>
                    <el-radio :label="1">{{ $t("随机值") }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </template>
              <!-- 类型固定值 展示 -->
              <template
                v-if="
                  objView.dataType == '0' &&
                  virtualData.virtualState == '1' &&
                  objView.virtualType == '0'
                "
              >
                <el-form-item :label="$t('取值')" prop="virtualNumberValue">
                  <el-input
                    :placeholder="$t('固定值')"
                    style="width: 160px"
                    v-model="objView.virtualNumberValue"
                  ></el-input>
                </el-form-item>
              </template>
              <!-- 类型随机值展示 -->
              <template
                v-if="
                  objView.dataType == '0' &&
                  virtualData.virtualState == '1' &&
                  objView.virtualType == '1'
                "
              >
                <el-form-item :label="$t('取值') + ':'" prop="virtualMange">
                  <el-input
                    :placeholder="$t('最小值')"
                    style="width: 72px"
                    v-model="virtualData.virtualMinRange"
                  ></el-input>
                  <span class="obj-detail">&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                  <el-input
                    :placeholder="$t('最大值')"
                    style="width: 72px"
                    v-model="virtualData.virtualMaxRange"
                  ></el-input>
                  <span class="obj-detail">&nbsp;&nbsp;,</span>
                  <el-input
                    :placeholder="$t('小数位数')"
                    style="width: 86px"
                    v-model="virtualData.virtualRadixPoint"
                  ></el-input>
                </el-form-item>
              </template>
            </el-form>
            <div class="sav-btn">
              <div class="serch-btn" @click="saveVirtualSetting">
                {{ $t("保存") }}
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import Cookies from "js-cookie";
import {
  API_pointsList,
  API_inspectObj,
  API_saveDevice,
} from "@/api/deploy/inspectpoint";
export default {
  dicts: ["recognition"],
  data() {
    return {
      showOption: false, //仅root用户可见操作区域
      viewPointId: "", //当前被选中的巡检点ID
      deviceId: "", //巡检对象id
      sevePort: window.location.protocol + "//" + window.location.host,
      ctx: "",
      searchInputSize: "medium",
      //查询条件
      listQuery: {
        viewPointName: "",
        deviceName: "",
        identifyType: "",
        deviceTypes: [],
      },
      objView: {
        dataType: "",
        virtualType: "0",
        virtualNumberValue: "",
      }, //对象查看
      virtualData: {}, //参考值
      pointsList: [], //巡检点数据
      objTable: [], //对象列表
      camereList: [], //可见光 标定集合
      thermalList: [], //红外 标定集合
      currentTab: "1", // 当前选中的tab
      virtualDataRules: {
        virtualState: [
          {
            required: true,
            message: this.$t("请选择是否启用"),
            trigger: "change",
          },
        ],
        virtualEmunValue: [
          {
            required: true,
            message: this.$t('"请选择取值"'),
            trigger: "change",
          },
        ],
        virtualType: [
          { required: true, message: this.$t("请选择类型"), trigger: "change" },
        ],
        virtualNumberValue: [
          { required: true, message: this.$t("请输入固定值"), trigger: "blur" },
        ],
        virtualMange: [
          {
            required: true,
            validator: (rules, value, cb) => {
              if (
                !this.virtualData.virtualMinRange ||
                !this.virtualData.virtualMaxRange ||
                !this.virtualData.virtualRadixPoint
              ) {
                return cb(new Error(this.$t("请输入取值!")));
              }
              return cb();
            },
            trigger: "blur",
          },
        ],
      },
    };
  },

  created() {
    this.getPointsList(); //获取巡检点列表数据
    this.getUserName(); //获取用户信息
  },
  mounted() {},
  watch: {
    objTable: {
      handler(val) {
        console.warn("val", val);
        if (val.length == 0) {
          //清空对象查看数据
          this.objView.deviceName = "";
          this.objView.identifyTypeName = "";
          this.objView.calibrationTypeName = "";
          this.objView.minRange = "";
          this.objView.maxRange = "";
          this.objView.unit = "";
        }
      },
      deep: true,
    },
  },
  methods: {
    /**获取用户信息 */
    getUserName() {
      const username = Cookies.get("username");
      if (username == "root") {
        this.showOption = true;
      } else {
        this.showOption = false;
      }
    },
    /**搜索 */
    searchBtn() {
      this.getPointsList();
    },
    /**巡检点 click */
    async pointItemClick(point) {
      //清除原本数组中的数据
      this.camereList = [];
      this.thermalList = [];
      // 设置高亮
      if (this.viewPointId != point.viewPointId) {
        this.$set(this, "viewPointId", point.viewPointId);
      }
      // 设置可见光为默认值
      this.$set(this, "currentTab", "1");
      //更改当前巡检点ID
      this.viewPointId = point.viewPointId;
      //获取可见光图片url
      let cameroUrl =
        this.sevePort +
        // "http://192.168.61.11" +
        this.pointsList.find((item) => item.viewPointId == this.viewPointId)
          .recognitionPicResourceUrl;
      //获取表格数据
      let deviceTypes = this.listQuery.deviceTypes;
      if (deviceTypes && deviceTypes.length > 0) {
        if (deviceTypes.indexOf(",") == -1) {
          deviceTypes = String(deviceTypes);
        } else {
          deviceTypes = deviceTypes.join(",");
        }
      }
      this.objTable = await this.getDeviceInfo({
        viewPointId: point.viewPointId,
        deviceName: this.listQuery.deviceName,
        identifyType: this.listQuery.identifyType,
        deviceType: deviceTypes,
      });
      //设置默认查看表格第一个
      if (this.objTable.length > 0) {
        this.objViewBtn(this.objTable[0]);
      }
      this.objTable.forEach((listItem) => {
        eval(listItem.auxiliaryBox).filter((pointItem) => {
          if (pointItem.deviceType == 0) {
            this.camereList.push({
              deviceBox: pointItem.deviceBox,
              deviceId: pointItem.deviceId,
            });
          } else {
            this.thermalList.push({
              deviceBox: pointItem.deviceBox,
              deviceId: pointItem.deviceId,
            });
          }
        });
      });
      //标定多边形
      this.selectArea(cameroUrl, this.camereList);
    },
    /** tab点击 */
    tabClick(type) {
      switch (type) {
        case "1":
          this.$set(this, "currentTab", "1");
          //获取可见光图片
          let cameroImg =
            this.sevePort +
            // "http://10.16.62.1" +
            this.pointsList.find((item) => item.viewPointId == this.viewPointId)
              .recognitionPicResourceUrl;
          //标定多边形
          this.selectArea(cameroImg, this.camereList);
          break;
        case "2":
          this.$set(this, "currentTab", "2");
          // 获取热成像图片
          let thermalUrl =
            this.sevePort +
            // "http://10.16.62.1" +
            this.pointsList.find((item) => item.viewPointId == this.viewPointId)
              .recognitionInfraredResourceUrl;
          //标定多边形
          this.selectArea(thermalUrl, this.thermalList);
          break;
      }
    },
    /**table 查看 */
    objViewBtn(row) {
      //赋值
      this.deviceId = row.deviceId; //当前deviceId
      //对象查看数据处理
      this.objView = { ...row };
      this.objView.dataType = row.dataType + "";
      //虚拟值数据处理
      this.virtualData = Object.assign({}, row.virtualData);
      //是否启用
      this.virtualData.virtualState =
        row.virtualData.virtualState == true ? "1" : "0";
      //枚举-取值
      this.virtualData.virtualEmunValue = row.virtualData.virtualEmunValue;
      //数值-类型
      this.$set(this.objView, "virtualType", row.virtualData.virtualType);
      // 数值 取值
      this.$set(
        this.objView,
        "virtualNumberValue",
        row.virtualData.virtualNumberValue
      );
      // 最小值
      this.virtualData.virtualMinRange = row.virtualData.virtualMinRange;
      // 最大值
      this.virtualData.virtualMaxRange = row.virtualData.virtualMaxRange;
      // 小数位数
      this.virtualData.virtualRadixPoint = row.virtualData.virtualRadixPoint;
    },
    /**虚拟值设置 */
    saveVirtualSetting() {
      this.$refs.virtualRef.validate((valid) => {
        if (valid) {
          //保存接口
          let params = {
            virtualState: this.virtualData.virtualState == "1" ? true : false,
            virtualType: this.objView.virtualType,
            virtualNumberValue: this.objView.virtualNumberValue,
            virtualMaxRange: this.virtualData.virtualMaxRange,
            virtualMinRange: this.virtualData.virtualMinRange,
            virtualRadixPoint: this.virtualData.virtualRadixPoint,
            virtualEmunValue:
              this.virtualData.virtualEmunValue == "1" ? "开" : "关",
          };
          API_saveDevice({
            deviceId: this.deviceId,
            virtualData: { ...params },
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success(this.$t("阈值保存成功"));
              this.searchBtn();
            } else {
              this.$message.error(this.$t("请求失败请重试"));
            }
          });
        }
      });
    },
    /**巡检点列表 */
    getPointsList() {
      //清空
      this.camereList = [];
      this.thermalList = [];
      let deviceTypes = this.listQuery.deviceTypes;
      if (deviceTypes && deviceTypes.length > 0) {
        if (deviceTypes.indexOf(",") == -1) {
          deviceTypes = String(deviceTypes);
        } else {
          deviceTypes = deviceTypes.join(",");
        }
      }
      API_pointsList({ ...this.listQuery, deviceTypes: deviceTypes }).then(
        (res) => {
          if (res.code == 200) {
            this.pointsList = res.data;
            //设置默认巡检点ID
            this.viewPointId =
              this.pointsList.length > 0 ? this.pointsList[0].viewPointId : "";
            //获取表格数据
            API_inspectObj({
              viewPointId: this.pointsList == 0 ? "" : this.viewPointId,
              deviceName: this.listQuery.deviceName,
              identifyType: this.listQuery.identifyType,
              deviceType: deviceTypes,
            }).then((res) => {
              if (res.code == 200) {
                this.objTable = res.data;
                //设置默认查看表格第一个
                if (this.objTable.length > 0) {
                  this.objViewBtn(this.objTable[0]);
                }
              }
            });
            //点击巡检点列表第一个
            let pointItem = this.pointsList[0];
            this.pointItemClick(pointItem);
          } else {
            this.$message.info(res.msg);
          }
        }
      );
    },
    /**巡检对象 */
    getDeviceInfo(query) {
      return new Promise((resolve, reject) => {
        API_inspectObj(query).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
          }
        });
      });
    },
    /**画图形 */
    selectArea(imgSrc, sceneBox) {
      let ths = this;
      let canvas = this.$refs.canvasImg;
      let ctx = canvas.getContext("2d");
      let img = new Image();
      img.src = imgSrc;
      // img.width = 480;
      //显示图片
      img.onload = function () {
        //获取原图和页面比例大小
        let widthProp = 636 / img.width;
        let heightProp = 356 / img.height;
        img.width = 636;
        img.height = 356;
        let [width, height] = [img.width, img.height];
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, 0, 0, width, height);
        ths.drawLine(sceneBox, widthProp, heightProp);
      };
    },
    /**canvas 画线 */
    drawLine(sceneBox, widthProp, heightProp) {
      this.$nextTick(() => {
        let canvas = this.$refs.canvasImg;
        this.ctx = canvas.getContext("2d");
        //画线
        sceneBox.forEach((boxList) => {
          // return;
          this.ctx.beginPath();
          let pointsArr = [];
          pointsArr = eval(boxList.deviceBox).map((item) => {
            return { x: item[0] * widthProp, y: item[1] * heightProp };
          });
          // 写字
          this.write(eval(boxList.deviceId), pointsArr);
          pointsArr.forEach((item) => {
            this.ctx.lineTo(item.x, item.y);
          });
          this.ctx.closePath();
          this.ctx.lineCap = "round";
          this.ctx.lineJoin = "round";
          this.ctx.strokeStyle = "red";
          this.ctx.lineWidth = 3;
          this.ctx.closePath();
          this.ctx.stroke();
        });
      });
    },
    /**写文字 */
    write(content, position) {
      let color = "red";
      // color = "rgba(191, 191, 191, 1)";
      this.ctx.fillStyle = color;
      this.ctx.font = "14px arial";
      this.ctx.fillText(content, position[0].x, position[1].y - 5);
    },
    /**重置 */
    resetBtn() {
      this.listQuery = {
        viewPointName: "",
        deviceName: "",
        identifyType: "",
        deviceTypes: [],
      };
      this.getPointsList();
    },
  },
};
</script>
<style lang="scss" scoped>
.point-view {
  .line-one {
    box-sizing: border-box;
    // background-color: rgba(255, 255, 255, 0.08);
    .form-area {
      display: flex;
      flex-wrap: wrap;
      color: #fff;
      padding: 23px 23px 0 23px;
      .func-item {
        display: flex;
        margin: 0 0 23px 23px;
        align-items: center;
        &:nth-of-type(1) {
          margin-left: 0;
        }
        label {
          white-space: nowrap;
          margin-right: 10px;
        }
      }
    }
    .search-area-btns {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
  .line-two {
    height: 816px;
    // margin-top: 16px;
    border-top: 1px dashed rgba(219, 255, 251, 0.2);
    .point-list {
      padding: 24px;
      box-sizing: border-box;
      .title {
        font-size: 18px;
        color: #00d1ff;
        padding-bottom: 23px;
      }
      .lists {
        display: flex;
        align-items: center;
        height: 40px;
        color: #fff;
        font-size: 14px;
        .point {
          width: 40px;
        }
      }
      .current-item {
        background-color: rgba(0, 209, 255, 0.1);
        .point {
          display: flex;
          justify-content: center;
          span {
            display: flex;
            width: 4px;
            height: 4px;
            background-color: #00d1ff;
            border-radius: 50%;
          }
        }
      }
    }
    // 第二列
    .camero-table {
      height: 816px;
      border-left: 1px dashed rgba(219, 255, 251, 0.2);
      border-right: 1px dashed rgba(219, 255, 251, 0.2);
      .left {
        font-size: 18px;
        color: #00d1ff;
        padding-bottom: 23px;
      }
      .right {
        display: inline-block;
        margin-left: 169px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
      }
      .tabs {
        position: relative;
        padding: 24px 54px;
        box-sizing: border-box;
        .img {
          width: 656px;
          height: 376px;
          padding: 10px;
          box-sizing: border-box;
          border: 1px solid rgba(0, 209, 255, 1);
          img {
            width: 100%;
            height: 100%;
          }
        }
        .hot,
        .camero {
          position: absolute;
          width: 40px;
          height: 96px;
          // 字体水平居中
          padding-left: 8px;
          box-sizing: border-box;
          writing-mode: vertical-lr;
          writing-mode: tb-lr;
          text-align: center;
          background-color: rgba(255, 255, 255, 0.1);
          border-radius: 8px 0px 0px 8px;
          color: #fff;
        }
        .camero {
          top: 24px;
          left: 14px;
        }
        .hot {
          top: 140px;
          left: 13px;
        }
        .current-tab {
          background-color: rgba(0, 209, 255, 0.2);
          border: 1px solid rgba(0, 209, 255, 1);
          border-right: 0;
        }
      }
      .calibration-verification {
        width: 100%;
        padding: 24px 24px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-bottom: 1px dashed rgba(219, 255, 251, 0.2);
        .title {
        }
        .tabs {
        }
      }
      .obj-list {
        padding: 24px;
        box-sizing: border-box;
        .title {
          font-size: 18px;
          color: #00d1ff;
          padding-bottom: 23px;
        }
      }
    }
    // 第三列
    .view-obj {
      height: 816px;
      .title {
        font-size: 18px;
        color: #00d1ff;
        padding-bottom: 23px;
      }
      .obj-detail {
        color: #fff;
      }
      .el-row {
        margin-top: 20px;
      }
      .obj-view {
        height: 497px;
        padding: 24px;
        box-sizing: border-box;
        border-bottom: 1px dashed rgba(219, 255, 251, 0.2);
      }
      .operation {
        padding: 24px;
        box-sizing: border-box;
        .sav-btn {
          margin-left: 95px;
        }
      }
    }
  }
  .table-btn {
    width: 44px;
    height: 26px;
    line-height: 6px;
    color: #fff;
    border-radius: 2px;
    border: 1px solid rgba(0, 168, 252, 0.7);
    background-color: rgba(0, 209, 255, 0.2);
  }
}
.scroll-hidden {
  height: 700px;
  overflow: auto;
}
.scroll-hidden::-webkit-scrollbar {
  display: none;
}
</style>
